import React,{FC,useEffect} from 'react'
import { Form,Input } from 'antd'
import { QuestionInfoPropsType } from './interface'

const { TextArea } = Input
const PropComponent: FC<QuestionInfoPropsType> = (props:QuestionInfoPropsType)=>{
    const { title,desc,onChange,disabled } = props
    const [form] = Form.useForm()
    useEffect(()=>{ // 监听 title,desc的变化
        form.setFieldsValue({ title,desc })
    },[title,desc])

    const handleValuesChange =()=>{
        if(onChange){
            onChange(form.getFieldsValue())
        }
    }

    return <Form 
    layout='vertical' 
    initialValues={{ title,desc }}  
    form={form}
    disabled={disabled}
    onValuesChange={handleValuesChange}>
        <Form.Item label="标题" name="title" rules={[{required: true, message:"请输入问卷标题"}]}>
            <Input />
        </Form.Item>
        <Form.Item label="描述" name="desc">
            <TextArea />
        </Form.Item>
    </Form>
}

export default PropComponent